<template>
  <div class="main">
    <div class="shadow"></div>

    <div class="header">
      <div class="tabbox">
        <div
          class="tab"
          v-for="(item, index) in tablist"
          :key="index"
          :class="activeindex == index ? 'activetab' : ''"
          @click="getTba(index)"
        >
          {{ item }}
        </div>
      </div>

      <div class="adbox">
        <div
          @click="getNewTab(index, item)"
          class="ad"
          v-for="(item, index) in ggData"
          :key="index"
        >
          <img class="img" :src="adlist[activeindex][index].img" alt="" />
          <div class="text" :class="tabIndex == index ? 'newText' : ''">
            {{ item.adPositionText }}
          </div>
          <!-- <div class="bottomad">
            <img src="../../../assets/image/shop/jiangpai.png" alt="" />
            <span>诚信商专属</span>
          </div> -->
        </div>
      </div>
    </div>
    <div
      class="tabbox"
      v-if="ggObj.priceFlag"
      style="margin: 0rem auto; width: calc(100% - 0.36rem)"
    >
      <div
        class="tab"
        v-for="(item, index) in ggObj.advertisementVOList"
        :key="index"
        :class="activeindexS == index ? 'activetab' : ''"
        @click="getTbaB(index, item)"
      >
        {{ item.adPositionText }}
      </div>
    </div>
    <div class="bottom" v-if="ggObj">
      <div class="left">
        <div class="top">
          <div class="headertext">广告位置</div>
          <div class="box">
            <!-- <img
              v-if="ggObj.advertisementVOList[activeindexS].adPositionImage"
              :src="ggObj.advertisementVOList[activeindexS].adPositionImage"
              alt=""
            /> -->
            <el-image
            style="width: 100%;height: 2.75rem;"
              v-if="ggObj.advertisementVOList[activeindexS].adPositionImage"
              :src="ggObj.advertisementVOList[activeindexS].adPositionImage"
              :preview-src-list="[
                ggObj.advertisementVOList[activeindexS].adPositionImage,
              ]"
            >
            </el-image>
          </div>
        </div>

        <div class="bottom">
          <div class="headertext">广告说明</div>
          <div class="text">
            {{ ggObj.advertisementVOList[activeindexS].description }}
          </div>
        </div>
      </div>

      <div class="right">
        <div class="topitem">
          <div class="headertext">广告报名</div>
          <div class="itembox">
            <div class="gridbox">
              <div class="flexleft">
                <div class="leftitem">
                  广告开始时间:
                  {{ ggObj.advertisementVOList[activeindexS].adCreateTime }}
                </div>
                <div class="leftitem">
                  广告结来时间:
                  {{ ggObj.advertisementVOList[activeindexS].adEndTime }}
                </div>
                <div class="leftitem">
                  应用周期天数:
                  {{ ggObj.advertisementVOList[activeindexS].adDay }}天
                </div>
                <div class="leftspecialitem">
                  <span
                    >报名开始时间:
                    {{
                      ggObj.advertisementVOList[activeindexS].applyCreateTime
                    }}</span
                  >
                  <span
                    >截止报名时间:
                    {{
                      ggObj.advertisementVOList[activeindexS].applyEndTime
                    }}</span
                  >
                </div>
              </div>

              <div class="flexright">
                <div class="righttop">
                  <div>
                    广告价格:{{
                      ggObj.advertisementVOList[activeindexS].price
                    }}元
                  </div>
                  <div style="margin-top: 0.1rem">
                    可报名次数：{{
                      ggObj.advertisementVOList[activeindexS].remainingNumber
                    }}次
                  </div>
                  <div style="margin-top: 0.1rem">
                    已报名次数：{{
                      ggObj.advertisementVOList[activeindexS].remainedNumber
                    }}次
                  </div>
                </div>
                <div class="rightbottom">
                  <!-- <div class="button">报名已结束</div> -->
                  <div
                    class="button"
                    @click="dialogVisible = true"
                    v-if="
                      !ggObj.advertisementVOList[activeindexS].isSignUp &&
                      ggObj.advertisementVOList[activeindexS].remainingNumber >
                        0
                    "
                  >
                    我要报名
                  </div>
                  <div
                    class="button huise"
                    v-if="
                      ggObj.advertisementVOList[activeindexS].remainingNumber ==
                        0 && !ggObj.advertisementVOList[activeindexS].isSignUp
                    "
                  >
                    我要报名
                  </div>
                  <div
                    class="button"
                    v-if="ggObj.advertisementVOList[activeindexS].isSignUp"
                  >
                    报名成功
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottomitem">
          <div class="headertext">报名规则</div>
          <div class="itembox">
            <div>
              平台工作人员会设置每期约单个广告位置报名数量，服名人数满了之后此广告位将不前在报名。
            </div>
            <div>
              点击”我要报名"按钮，命自财从您的平台余制中和除根防的广告位费用，扣费成功后此广告位损名成功，"我要服名会变方”报名成功”，若余数不足以扣除当前广告位费用
              时，则报名不成功。
            </div>
            <div>
              报名成功后会获得广告位的使用权，可在“我的广告“页面议置广告，到广告开始展示的时间，设置的广告会自动展欧的广告位置，在广告位使用期同都可以对广告进行修
              改设置。
            </div>
            <div>具体广告位推名相关闻赠可以咨询联局平台客服。</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">请选择支付方式</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="btnBoxs">
          <div
            class="btnBox"
            @click="arrIndex = index"
            v-for="(item, index) in arr"
            :key="index"
          >
            {{ item }}{{ index == 2 ? "" : "" }}
            <img
              v-if="arrIndex == index"
              src="@/static/Imgs/duihao.png"
              class="duihaoImg"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button
          type="primary"
          class="hongBtn"
          @click="advertisementRegistration"
        >
          确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleB" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">微信支付</div>
        <div class="chahao" @click="dialogVisibleB = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tishi">
          <i class="iconfont icon-weixin"></i>
          请在10分钟内使用微信扫码支付{{
            ggObj.advertisementVOList[activeindexS].price
          }}元
        </div>
        <img :src="wxpay" alt="" />
      </div>
      <div class="btnBox">
        <el-button
          type="primary"
          @click="dialogVisibleB = false"
          class="huiBtn"
        >
          取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ShowAdvertisementPage,
  selectAdInfo,
  advertisementRegistration,
} from "@/api/seller/adentry.js";
import { queryPayStatus } from "@/api/shopDetail";
export default {
  created() {},
  data() {
    return {
      dialogVisibleB: false,
      arrIndex: 0,
      arr: ["广告金", "微信", "支付宝"],
      dialogVisible: false,
      tablist: [
        "首页页面",
        "商品库页面",
        "当季新品页面",
        "当季热卖页面",
        "直播选品页面",
      ],
      activeindex: 0,
      tabIndex: 0,
      adlist: [
        [
          {
            img: require("../../../assets/image/adentry/seventh.png"),
          },
          {
            img: require("../../../assets/image/adentry/second.png"),
          },
          {
            img: require("../../../assets/image/adentry/third.png"),
          },
          {
            img: require("../../../assets/image/adentry/fourth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/seventh.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/first.png"),
          },
          {
            img: require("../../../assets/image/adentry/eighth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/sixth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
          },
        ],
        [
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "商品库好物推荐",
          },
        ],
        [
          {
            img: require("../../../assets/image/adentry/third.png"),
            name: "当季新品轮播",
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "当季新品新款推荐",
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "当季新品左侧店展",
          },
        ],
        [
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "当季热卖热卖推荐",
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "当季热卖左侧店展",
          },
          {
            img: require("../../../assets/image/adentry/third.png"),
            name: "当季热卖轮播",
          },
        ],
        [
          {
            img: require("../../../assets/image/adentry/third.png"),
            name: "直播选品轮播",
          },
          {
            img: require("../../../assets/image/adentry/fifth.png"),
            name: "直播选品直播热卖",
          },
        ],
      ],
      ggData: [
        {
          specification: "",
        },
      ],
      ggObj: false,
      activeindexS: 0,
      wxpay: "",
      timer: null,
      dealId: null,
    };
  },
  created() {
    this.ShowAdvertisementPage();
  },
  deactivated() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    //获取支付状态
    queryPayStatus() {
      queryPayStatus(this.dealId).then((data) => {
        if (data.data == "支付成功") {
          clearInterval(this.timer);
          this.$message({
            message: "支付成功",
            type: "success",
          });
          this.dialogVisibleB = false;
          this.dialogVisible = false;
          this.ShowAdvertisementPage();
        }
        if (data.data == "支付失败") {
          clearInterval(this.timer);
          this.$message.error("支付失败");
          this.dialogVisibleB = false;
        }
      });
    },
    //广告报名
    advertisementRegistration() {
      advertisementRegistration({
        ...this.ggObj.advertisementVOList[this.activeindexS],
        payType: this.arrIndex,
      }).then((data) => {
        if (data.code == 200) {
          if (this.arrIndex == 0) {
            this.$message({
              message: "报名成功",
              type: "success",
            });
            this.dialogVisible = false;
            this.ShowAdvertisementPage();
          }
          if (this.arrIndex == 1) {
            this.wxpay = data.data.payCode;
            this.dealId = data.data.dealId;
            this.timer = window.setInterval(() => {
              this.queryPayStatus();
            }, 2000);
            this.dialogVisibleB = true;
          }

          // this.selectMyAdByPosition();
        }
      });
    },
    //切换信息
    getTbaB(index, item) {
      this.activeindexS = index;
    },
    getNewTab(index, item) {
      this.tabIndex = index;
      this.selectAdInfo(item.adPosition);
    },
    //获取广告详情
    selectAdInfo(adPosition) {
      // this.activeindexS = 0;
      selectAdInfo({
        adPosition: adPosition,
      }).then((data) => {
        this.ggObj = data.data;
      });
    },
    //获取广告信息
    ShowAdvertisementPage() {
      ShowAdvertisementPage({
        keyword: this.activeindex,
      }).then((data) => {
        this.ggData = data.data;
        this.selectAdInfo(this.ggData[this.tabIndex].adPosition);
      });
    },
    getTba(index) {
      this.activeindex = index;
      this.tabIndex = 0;
      this.activeindexS = 0;
      this.ShowAdvertisementPage();
    },
  },
  watch: {
    dialogVisibleB() {
      if (!this.dialogVisibleB) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "iconfont"; /* Project id 3269139 */
  src: url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.woff2?t=1697709684970")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.woff?t=1697709684970")
      format("woff"),
    url("//at.alicdn.com/t/c/font_3269139_7wqpl7x9ex5.ttf?t=1697709684970")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-weixin:before {
  content: "\e662";
}
.icon-weixin {
  color: rgb(67, 201, 62);
  margin-right: 0.1rem;
}
.main {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  .shadow {
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg, #ffffff, #f5f5f5);
  }
  .tabbox {
    width: 100%;
    height: 0.42rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 0.01rem solid #e8e8e8;
    .tab {
      width: auto;
      height: 0.4rem;
      text-align: center;
      line-height: 0.4rem;
      font-size: 0.16rem;
      color: #000000;
      padding: 0rem 0.2rem;
      border: 0.01rem solid #e8e8e8;
      border-bottom: none;
      cursor: pointer;
      border-top: none;
      border-left: none;
    }
    .activetab {
      background-color: red;
      color: #ffffff !important;
    }
  }
  .header {
    margin: 0rem auto;
    width: calc(100% - 0.36rem);
    // height: 1.76rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #e8e8e8;
    .tabbox {
      width: 100%;
      height: 0.42rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.01rem solid #e8e8e8;
      .tab {
        width: auto;
        height: 0.4rem;
        text-align: center;
        line-height: 0.4rem;
        font-size: 0.16rem;
        color: #000000;
        padding: 0rem 0.2rem;
        border: 0.01rem solid #e8e8e8;
        border-bottom: none;
        cursor: pointer;
        border-top: none;
        border-left: none;
      }
      .activetab {
        background-color: red;
        color: #ffffff !important;
      }
    }
    .adbox {
      width: 100%;
      // height: 1.34rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .ad {
        padding: 0.2rem 0;
        cursor: pointer;
        width: 1.9rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.16rem;
        .img {
          width: 0.2rem;
          height: auto;
        }
        .text {
          margin: 0.08rem 0;
          color: #999999;
        }
        .newText {
          color: red;
          font-weight: 700;
        }
        .bottomad {
          display: flex;
          color: #ec6c15;
          align-items: center;
          font-size: 0.14rem;
          img {
            width: 0.16rem;
            height: 0.16rem;
            margin-right: 0.04rem;
          }
        }
      }
    }
  }

  .bottom {
    margin: 0.2rem auto 0 auto;
    width: calc(100% - 0.36rem);
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .headertext {
      width: calc(100% - 0.28rem);
      padding: 0 0.14rem;
      height: 0.42rem;
      line-height: 0.42rem;
      text-align: left;
      background: #f5f7f9;
      font-size: 0.14rem;
      color: #000000;
    }
    .left {
      width: 5.3rem;
      height: 5.62rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .top {
        width: 100%;
        height: 3.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #e8e8e8;
        .box {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 4.96rem;
            height: 2.38rem;
            display: block !important;
          }
        }
      }
      .bottom {
        width: 100%;
        height: 2.22rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #e8e8e8;
        .text {
          flex: 1;
          width: calc(100% - 0.28rem);
          margin-top: 0.1rem;
          font-size: 0.14rem;
          color: #666666;
        }
      }
    }
    .right {
      // width: 10.76rem;
      height: 5.62rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-left: 0.2rem;
      .topitem {
        width: 100%;
        height: 2.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #e8e8e8;
        .itembox {
          width: calc(100% - 0.28rem);
          flex: 1;
          font-size: 0.14rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .gridbox {
            width: 99%;
            height: 2.12rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 0.01rem solid #e8e8e8;
            .flexleft {
              width: 50%;
              height: 2.12rem;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              .leftitem {
                // padding-left: 0.19rem;
                text-indent: 1em;
                width: 100%;
                height: 0.42rem;
                line-height: 0.42rem;
                text-align: left;
                color: #666666;
                border: 0.01rem solid #e8e8e8;
                border-top: none;
                border-left: none;
              }
              .leftspecialitem {
                text-indent: 1em;
                // margin-left: 0.19rem;
                width: 100%;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: flex-start;
                color: #666666;
                border-right: 0.01rem solid #e8e8e8;
              }
            }

            .flexright {
              width: 5.01rem;
              height: 2.12rem;
              .righttop {
                width: 100%;
                height: 1.28rem;
                font-size: 0.14rem;
                color: #666666;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                border-bottom: 0.01rem solid #e8e8e8;
              }
              .rightbottom {
                width: 100%;
                height: 0.84rem;
                display: flex;
                justify-content: center;
                align-items: center;
                .button {
                  width: 1.26rem;
                  border-radius: 0.1rem;
                  height: 0.42rem;
                  line-height: 0.42rem;
                  text-align: center;
                  background: red;
                  font-size: 0.14rem;
                  color: #ffffff;
                  cursor: pointer;
                }
                .huise {
                  background: #e8e8e8;
                }
              }
            }
          }
        }
      }

      .bottomitem {
        width: 100%;
        height: 2.62rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #e8e8e8;
        .itembox {
          width: calc(100% - 0.28rem);
          flex: 1;
          font-size: 0.14rem;
          color: #666666;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          div {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    .text {
      width: 100%;
      text-align: center;
    }
    .btnBoxs {
      display: flex;
      .btnBox {
        margin-right: 0.1rem;
        width: 1.22rem;
        height: 0.45rem;
        border: 0.01rem solid #e22a1f;
        color: #3d3d3d;
        text-align: center;
        line-height: 0.45rem;
        border-radius: 4px;
        font-size: 0.16rem;
        position: relative;
        cursor: pointer;
        .duihaoImg {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 0.36rem;
          height: 0.31rem;
        }
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>